<!-- 就诊人 -->
<template>
	<view style="padding: 30rpx;">
		<view v-if="patientList?.length != 0">
			<view class="item" v-for="(item, index) in patientList" :key="index" @click="onEmitData(item, index)">
				<image src="/static/icon/icon_avatar.png" mode=""></image>
				<view class="item-content">
					<view class="">
						<view class="name">
							{{item.reportName}}
						</view>
						<view class="id">
							身份证号：{{item.carid}}
						</view>
					</view>
					<view class="">
					<!-- 	<view class="modify" @click="onNavPatient(0, item)">
							修改
						</view> -->
						<view class="delete" @click.stop="onDelete(index)">
							删除
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		<empty v-else></empty>
		<view style="height: 100rpx;"></view>
		<view class="add" @click="onNavPatient(1)">
			添加成员
		</view>
	</view>
</template>

<script setup>
	import {ref} from "vue";
	import {onLoad, onShow} from "@dcloudio/uni-app";
	
	
	const show = ref(false);
	
	const patientList = ref(null)
	
	onShow(() => {
		getList();
	})
	
	function getList() {
		patientList.value = uni.getStorageSync('PatientList') || [];
		if (Array.isArray(patientList.value) && patientList.value?.length != 0) {
			console.log("patientList", patientList.value)
		}else {
			patientList.value = [];
		}
	}
	function close() {
		show.value = false;
	}
	
	function open() {
		show.value = true;
	}
	
	function onNavPatient(type, item) {
		if (type == 0) {
			uni.navigateTo({
				url: `/view/user/patientList/patientInfo?type=0&data=${JSON.stringify(item)}`
			})
		} else {
			uni.navigateTo({
				url: `/view/user/patientList/patientInfo?type=1`
			})
		}
	}
	
	function onDelete(index) {
		uni.showModal({
			title: '删除',
			content: '确认删除吗？',
			success:res => {
				if (res.confirm ){
					uni.showToast({
						title:"删除成功"
					})
					patientList.value.splice(index, 1);
					uni.setStorageSync('PatientList', patientList.value)
					getList()
				}
			}
		})
	}
	
	function onEmitData(item, index) {
		uni.setStorageSync('patientItem', item)
		uni.navigateBack({delta:1})
	}
</script>

<style lang="scss">
	@import "../../../uni.scss";
	page {
		background-color: #f5f5f5;
	}
	.add {
		
		border-radius: 50rpx;
		/* 主要色/主要色 */
		background: $color-main;
		
		position: fixed;
		bottom: 30rpx;
		left: 30rpx;
		right: 30rpx;
		height: 90rpx;
		line-height: 90rpx;
		
		text-align: center;
		
		
		font-family: Source Han Sans;
		font-size: 36rpx;
		/* 纯白 */
		color: #FFFFFF;
	}
	.item {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		
		margin-top: 30rpx;
		
		border-bottom: 1rpx solid #D8D8D8;
		background-color: #FFF;
		border-radius: 20rpx;
		
		
		padding: 28rpx;
		
		
		&:first-child {
			margin-top: 0;
		}
		&:last-child {
			border-bottom: none;
		}
		image {
			width: 98rpx;
			height: 98rpx;
		}
		.item-content {
			margin-left: 18rpx;
			
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex: 1;
			
			.name {
				font-family: '思源黑体';
				font-size: 28rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				/* 正文色/正文色 */
				color: #1A1A1A;
			}
			.id {
				font-family: '思源黑体';
				font-size: 26rpx;
				font-weight: normal;
				line-height: normal;
				letter-spacing: normal;
				/* 描边色/描边色辅助 */
				color: #AAAAAA;
				
				margin-top: 10rpx;
			}
			
			.modify {
				border: 1rpx solid #0256FF;
				padding: 5rpx 30rpx;
				font-size: 24rpx;
				border-radius: 50rpx;
				color: #0256FF;
				
				&:active {
					border: 1rpx solid #029aff;
					color: #029aff;
				}
			}
			.delete {
				border: 1rpx solid #ff4545;
				padding: 5rpx 30rpx;
				font-size: 24rpx;
				border-radius: 50rpx;
				color: #ff4545;
				margin-top: 10rpx;
				
				&:active {
					border: 1rpx solid #ff5a5a;
					color: #ff5a5a;
				}
			}
		}
		
		
	}
	
	
</style>